﻿@{
    ViewBag.Title = "看板";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<style>
    .box{
        margin:5px;
    }
    .box-body {
        padding: 0;
    }
    .scrollable-div {
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .scrollable-div::-webkit-scrollbar {
        display: none;
    }
    .table{
        font-size:14px;
    }
    .table > thead > tr > th,
    .table > tbody > tr > td {
        background-color: #11497b !important;
        color: #ffffff;
    }
    .div_content {
        overflow: hidden;
        position: relative;
    }  
</style>
<link href="~/Content/plugin/jquery.orbit/orbit.css" rel="stylesheet" /> 
<section>
    <div class="row">
        <div class="col-xs-12 col-md-6" style="padding-right: 5px;">
            <div class="box box-primary box-solid">
                <div class="box-header with-border text-center">
                    <h3 class="box-title">日完成情况</h3>
                </div>
                <div class="box-body">
                    <div class="chart">
                        <div id="chart5" style="height: 500px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6" style="padding-left: 5px;">
            <div class="box box-primary box-solid">
                <div class="box-header with-border text-center">
                    <h3 class="box-title">日排产情况</h3>
                </div>
                <div class="box-body">
                    <div class="chart">
                        <div id="chart6" style="height: 500px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xs-12">
            <div class="box box-primary box-solid">
                <div class="box-header with-border text-center">
                    <h3 class="box-title">未完成单号</h3>
                </div>
                <div class="box-body div_content" id="div_content" style="height:500px">
                    <table class="table" id="tb1">
                    </table>
                    <table class="table" id="tb2">
                    </table>
                </div>
            </div>
        </div>

        <div class="col-xs-12">
            <div class="box box-primary box-solid">
                <div class="box-header with-border text-center">
                    <h3 class="box-title">仓库看板标题</h3>
                </div>
                <div class="box-body">
                    <div class="wrap">
                        <div id="featured">
                            <img src="~/Content/plugin/jquery.orbit/images/1.jpg" />
                            <img src="~/Content/plugin/jquery.orbit/images/2.jpg" />
                            <img src="~/Content/plugin/jquery.orbit/images/3.jpg" />
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-xs-12">
            <div class="box box-primary box-solid">
                <div class="box-header with-border text-center">
                    <h3 class="box-title">仓库看板标题</h3>
                </div>
                <div class="box-body scrollable-div" style="height:500px">
                    <table class="table table-hover table-striped text-nowrap">
                        <thead>
                            <tr>
                                <th>序号<br />No.</th>
                                <th>工单编号<br />Work Order</th>
                                <th>客户名称<br />Customer</th>
                                <th>物料编码<br />Material Code</th>
                                <th>物料描述<br />Description</th>
                                <th>发货数量<br />QTY</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="text-center">
                                <td>1</td>
                                <td>100018677300</td>
                                <td>GPC</td>
                                <td>93223892</td>
                                <td>LF60157G-158L6H 55,0/4</td>
                                <td>450</td>
                            </tr>
                            <tr class="text-center">
                                <td>2</td>
                                <td>100018677301</td>
                                <td>GPC</td>
                                <td>93225476</td>
                                <td>NK 100-225/175AA1F1S3ESBQQERW1</td>
                                <td>500</td>
                            </tr>
                            <tr class="text-center">
                                <td>3</td>
                                <td>100018677302</td>
                                <td>GPC</td>
                                <td>93230013</td>
                                <td>CL40101G-x33221 55,0/2</td>
                                <td>300</td>
                            </tr>
                            <tr class="text-center">
                                <td>4</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>5</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>6</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>7</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>8</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>9</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>10</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>11</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>12</td>
                                <td>100018677300</td>
                                <td>GPC</td>
                                <td>93223892</td>
                                <td>LF60157G-158L6H 55,0/4</td>
                                <td>450</td>
                            </tr>
                            <tr class="text-center">
                                <td>13</td>
                                <td>100018677301</td>
                                <td>GPC</td>
                                <td>93225476</td>
                                <td>NK 100-225/175AA1F1S3ESBQQERW1</td>
                                <td>500</td>
                            </tr>
                            <tr class="text-center">
                                <td>14</td>
                                <td>100018677302</td>
                                <td>GPC</td>
                                <td>93230013</td>
                                <td>CL40101G-x33221 55,0/2</td>
                                <td>300</td>
                            </tr>
                            <tr class="text-center">
                                <td>15</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>16</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="box box-primary box-solid">
                <div class="box-header with-border text-center">
                    <h3 class="box-title">仓库看板标题</h3>
                </div>
                <div class="box-body">
                    <div class="chart">
                        <div id="chart1" style="height: 500px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6" style="padding-right:5px;">
            <div class="box box-primary box-solid">
                <div class="box-header with-border text-center">
                    <h3 class="box-title">仓库看板标题</h3>
                </div>
                <div class="box-body">
                    <div class="chart">
                        <div id="chart2" style="height: 500px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6" style="padding-left: 5px;">
            <div class="box box-primary box-solid">
                <div class="box-header with-border text-center">
                    <h3 class="box-title">仓库看板标题</h3>
                </div>
                <div class="box-body">
                    <div class="chart">
                        <div id="chart3" style="height: 500px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6" style="padding-right: 5px;">
            <div class="box box-primary box-solid">
                <div class="box-header with-border text-center">
                    <h3 class="box-title">仓库看板标题</h3>
                </div>
                <div class="box-body scrollable-div" style="height:500px">
                    <table class="table table-hover table-striped text-nowrap">
                        <thead>
                            <tr>
                                <th>序号<br />No.</th>
                                <th>工单编号<br />Work Order</th>
                                <th>客户名称<br />Customer</th>
                                <th>物料编码<br />Material Code</th>
                                <th>物料描述<br />Description</th>
                                <th>发货数量<br />QTY</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="text-center">
                                <td>1</td>
                                <td>100018677300</td>
                                <td>GPC</td>
                                <td>93223892</td>
                                <td>LF60157G-158L6H 55,0/4</td>
                                <td>450</td>
                            </tr>
                            <tr class="text-center">
                                <td>2</td>
                                <td>100018677301</td>
                                <td>GPC</td>
                                <td>93225476</td>
                                <td>NK 100-225/175AA1F1S3ESBQQERW1</td>
                                <td>500</td>
                            </tr>
                            <tr class="text-center">
                                <td>3</td>
                                <td>100018677302</td>
                                <td>GPC</td>
                                <td>93230013</td>
                                <td>CL40101G-x33221 55,0/2</td>
                                <td>300</td>
                            </tr>
                            <tr class="text-center">
                                <td>4</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>5</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>6</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>7</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>8</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>9</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>10</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>11</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>12</td>
                                <td>100018677300</td>
                                <td>GPC</td>
                                <td>93223892</td>
                                <td>LF60157G-158L6H 55,0/4</td>
                                <td>450</td>
                            </tr>
                            <tr class="text-center">
                                <td>13</td>
                                <td>100018677301</td>
                                <td>GPC</td>
                                <td>93225476</td>
                                <td>NK 100-225/175AA1F1S3ESBQQERW1</td>
                                <td>500</td>
                            </tr>
                            <tr class="text-center">
                                <td>14</td>
                                <td>100018677302</td>
                                <td>GPC</td>
                                <td>93230013</td>
                                <td>CL40101G-x33221 55,0/2</td>
                                <td>300</td>
                            </tr>
                            <tr class="text-center">
                                <td>15</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                            <tr class="text-center">
                                <td>16</td>
                                <td>100018677303</td>
                                <td>GPC</td>
                                <td>93221604</td>
                                <td>NK 65-180/172AAEF1S3ESBQQENWI</td>
                                <td>80</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6" style="padding-left: 5px;">
            <div class="box box-primary box-solid">
                <div class="box-header with-border text-center">
                    <h3 class="box-title">仓库看板标题</h3>
                </div>
                <div class="box-body">
                    <div class="chart">
                        <div id="chart4" style="height: 500px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="~/Content/plugin/echarts/echarts.min.js"></script>
<script src="~/Content/plugin/echarts/jquery.ba-resize.min.js"></script>
<script src="~/Content/plugin/jquery.orbit/jquery.orbit.min.js"></script>
<script src="~/Content/plugin/jquery.orbit/jquery.slide.js"></script>
<script type="text/javascript">
    $(function () {
        $('#featured').orbit();
        $('.orbit-wrapper,.orbit,img').css({
            "width": "100%",
            "height": $(window).height() * 0.5 + 'px',
        });
        renderChart1('chart1');
        renderChart2('chart2');
        renderChart3('chart3');
        renderChart1('chart4');
        renderChart56('chart5');
        renderChart56('chart6');
    })
     
    function renderChart1(id) {
        var chart = echarts.init(document.getElementById(id));
        var option = {
            backgroundColor: '#11497b',
            color:'#ffffff',
            tooltip: {
                trigger: 'axis' 
            },
            grid: {
                top: 40,
                left: 20,
                right: 20,
                bottom: 20,
                containLabel: true,
            },
            xAxis: {
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisLabel: {
                    textStyle: {
                        color: "#fff",
                    }
                }
            },
            yAxis: {
                axisLabel: {
                    textStyle: {
                        color: "#fff" 
                    }, 
                }
            },
            series: [{
                name: '金额',
                type: 'bar',//表明柱状体，饼图是pie，折线图是line
                barWidth: 30,//柱子宽度
                data: [120, 100, 80, 70, 90, 150, 180, 160, 100, 90, 120, 100],  
                itemStyle: {
                    emphasis: {//鼠标移入动态的时候显示的默认样式
                        color: '#FF0000',
                    },
                    normal: {//柱子相关设置
                        color: '#1E90FF ',
                        label: {
                            show: true,
                            formatter: '{c}',
                            position: 'top',
                            textStyle: {
                                color: '#fff',
                                fontWeight: 'bold',
                            },

                        }
                    },
                }
            }]
        };

        chart.setOption(option);
        $('.chart').resize(function () {
            chart.resize();
        });
    }

    function renderChart2(id) {
        var chart = echarts.init(document.getElementById(id));
        var option = { 
            backgroundColor: '#11497b',
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '10%',
                orient: 'horizontal',
                left: 'center',
                textStyle: { //图例文字的样式
                    color: '#fff', 
                },
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            
                        }
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                textStyle: {
                                    color: '#FFFFFF',//用这个属性改变字体颜色
                                },
                            },
                        },
                    } 
                }
            ]
        };
        chart.setOption(option);
        $('.chart').resize(function () {
            chart.resize();
        });
    }

    function renderChart3(id) {
        var chart = echarts.init(document.getElementById(id));
        var option = {
            backgroundColor: '#11497b', 
            //提示框，默认显示
            tooltip: {
                trigger: 'axis',
                axisPointer: {// 坐标轴指示器，坐标轴触发有效
                    type: 'line'// 默认为直线，可选为：'line' | 'shadow'
                }, 
            },
            //控制直角坐标系与容器上下左右的距离
            grid: {
                left: '12%',
                right: '12%',
                bottom: '10',
                top: '34%',
                containLabel: true,//gid区域是否包含坐标轴的刻度标签。
            },
            //图例相关
            legend: {
                top: '10%',
                left: 'center',
                data: ['喜爱量', '运动量', '参与量'],//与series两个对象中的name对应
                textStyle: { //图例文字的样式
                    color: '#fff',
                },
            },
            // x轴（指的是水平的那条线）相关配置
            xAxis: [
                {
                    type: 'category',
                    data: ['棒球', '羽毛球', '足球', '网球', '篮球', '乒乓球'],//类目轴数据
                    axisLabel: {    // 坐标轴标签
                        show: true,  // 是否显示
                        inside: false, // 是否朝内
                        color: '#fff',
                        fontSize: 12,
                        interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                    },
                    axisLine: {    // 坐标轴 轴线
                        show: true,  // 是否显示
                        lineStyle: {
                            // color: '#FFFFFF',
                            width: 1,
                            type: 'solid'
                        },
                    },
                    axisTick: {//刻度相关
                        show: true, //是否显示刻度
                        alignWithLabel: true,//是否对齐标签
                    },
                    inverse: true,//翻转x轴数据
                }
            ],
            // y轴（垂直的那条线）设置
            yAxis: [
                {
                    type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
                    axisLabel: {    // 坐标轴标签
                        show: true,  // 是否显示
                        // inside: true, // 标签是否朝内,默认false
                        interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                        rotate: 0, // 旋转角度
                        margin: 5, // 刻度标签与轴线之间的距离
                        color: '#fff',  // 标签颜色默认取轴线的颜色 
                        fontSize: 12//标签字号
                    },
                    splitLine: {    // 网格线
                        show: true,  // 是否显示，默认为true
                        lineStyle: {
                            color: ['#eee'],
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLine: {    // 坐标轴 轴线
                        show: false,  // 是否显示,默认false
                        lineStyle: {
                            // color: '#FFFFFF',//轴线颜色
                            width: 1,//轴线宽度
                            type: 'solid'//轴线类型
                        }
                    },
                }
            ],
            series: [
                {
                    name: '喜爱量',
                    type: 'line',//表明是折线图line
                    data: [10, 50, 30, 26, 17, 47],//值数据，与类型数据一一对应
                    itemStyle: {
                        normal: {
                            color: '#FA677B', //折线点上的颜色
                            lineStyle: {
                                color: '#FA677B' //折线上颜色
                            }
                        }
                    },
                },
                {
                    name: '运动量',
                    type: 'line',//表明柱状体，饼图是pie，折线图是line
                    data: [13, 20, 40, 16, 47, 27],//值数据，与类型数据一一对应
                    itemStyle: {
                        normal: {
                            color: '#F9CF9A', //折线点上的颜色
                            lineStyle: {
                                color: '#F9CF9A' //折线上颜色
                            }
                        }
                    },
                },
                {
                    name: '参与量',
                    type: 'line',//表明柱状体，饼图是pie，折线图是line
                    data: [20, 15, 21, 19, 27, 16],//值数据，与类型数据一一对应
                    itemStyle: {
                        normal: {
                            color: '#8C2DD6', //折线点上的颜色
                            lineStyle: {
                                color: '#8C2DD6' //折线上颜色
                            }
                        }
                    },
                }
            ],
        };
        chart.setOption(option);
        $('.chart').resize(function () {
            chart.resize();
        });
    }

    function renderChart56(id) {
        var chart = echarts.init(document.getElementById(id));
        var option = {
            backgroundColor: '#11497b',
            color: '#ffffff',
            tooltip: {
                trigger: 'axis',
                formatter: '{c}%'
            },
            grid: {
                top: 40,
                left: 20,
                right: 20,
                bottom: 20,
                containLabel: true,
            },
            xAxis: {
                data: ['200', '202', '204', '205', '散件'],
                axisLabel: {
                    textStyle: {
                        color: "#fff",
                    }
                }
            },
            yAxis: { 
                type: 'value',
                axisLabel: {
                    show: true,
                    interval: 'auto',
                    formatter: '{value} %',
                    textStyle: {
                        color: "#fff"
                    },
                },
                show: true 
            },
            series: [{
                name: '占比',
                type: 'bar',//表明柱状体，饼图是pie，折线图是line
                barWidth: 30,//柱子宽度
                data: [75, 15, 28, 72, 29],
                itemStyle: {
                    emphasis: {//鼠标移入动态的时候显示的默认样式
                        color: '#FF0000',
                    },
                    normal: {//柱子相关设置
                        color: '#1E90FF',
                        label: {  
                            textStyle: {
                                color: '#fff',
                                fontWeight: 'bold',
                            },
                            show: true,
                            position: 'top',
                            formatter: '{c}%'
                        }
                    },
                }
            }]
        };

        chart.setOption(option);
        $('.chart').resize(function () {
            chart.resize();
        });
    } 
</script>